<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <h1></h1>
    <div class="row">
        <div class="col-lg-12">
            <div class="input-group input-group-lg">
                <input type="text" class="form-control" placeholder="请留言评论...." id="content">
                <span class="input-group-btn">
        <button id="but" class="btn btn-default btn-info" type="button">评论</button>

      </span>
            </div><!-- /input-group -->
            <hr class="html-editor-hr">
        </div><!-- /.col-lg-6 -->

        <form id="sel" th:each="i:${select}">
            <h3 hidden th:text="${i.getId()}"></h3>
            <br>
            <nobr th:text="${i.getUserid()}"></nobr>&emsp;<nobr th:text="${i.createdatetime}"></nobr>
            <h3 th:text="${i.getContent()}"></h3>
            <a  th:id="${i.getId()}" href="#">查看回复▼</a><br>
            <span hidden th:id="${i.getId()}+s" th:each="j:${i.getSubComments()}">
                    &nbsp;&nbsp; <nobr th:text="${j.getUserid()}"></nobr>  <nobr th:text="${j.createdatetime}"></nobr><br>
                    &nbsp;&nbsp;<nobr th:text="${j.getContent()}"></nobr><br>
                    &nbsp;&nbsp; <a href="#">回复</a>
              </span>
            <hr>
        </form>
    </div><!-- /.row -->

</div>
</body>
<script type="text/javascript" src="/js/jquery-1.12.4.js"></script>
<script type="text/javascript">
        $("a").click(function () {
            var id = this.id;

            if (this.text == "收起回复▲"){
                $(this).text("查看回复▼")
                $("#"+id+"s").hide();
            }else {
                $(this).text("收起回复▲")
                $("#"+id+"s").show();
            }
        })

        $("#but").click(function () {

            $.ajax({
                url: "/comment",
                type: "POST",
                data:{content:$("#content").val()} ,
                dataType: "json",
                success: function (result) {
                    if(result == 0){
                        alert("发表评论成功！")
                        window.location.reload();
                    }
                }
            })
        })
</script>
</html>